<template>
  <div class="home">
    <NavBar />
    <Swiper :swiperList="swiperList" />
    <Category :categoryList="categoryList" />
    <BigTitle title="新品上架" />
    <GoodsList :list="newGoodses" @handnavdetails="handnavdetails" />
    <BigTitle title="推荐商品" />
    <GoodsList
      num="ssss"
      :list="recommendGoodses"
      @handnavdetails="handnavdetails"
    />
    <BigTitle title="热卖专区" />
    <GoodsList num="ssss" :list="hotGoodses" @handnavdetails="handnavdetails" />
    <div class="icp">
      <a href="http://beian.miit.gov.cn">豫ICP备2020035917号-1</a>
    </div>
    <Tabber />
  </div>
</template>

<script lang="ts">
import NavBar from "@/components/NavBar.vue";
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getHome } from "@/utils/apis";
import Swiper from "@/components/Swiper.vue";
import Category from "@/components/Category.vue";
import BigTitle from "@/components/BigTitle.vue";
import GoodsList from "@/components/GoodsList.vue";
import Tabber from "@/components/Tabber.vue";
import { categoryList } from "@/utils/local-data";
export default defineComponent({
  components: {
    NavBar,
    Swiper,
    Category,
    BigTitle,
    GoodsList,
    Tabber,
  },
  setup() {
    const router = useRouter();
    // ref()创建一个响应式的数据 访问必须要通过 refValue.value的方式访问或者赋值
    // const refVlue = ref("233");
    const state = reactive({
      categoryList: categoryList,
      swiperList: [],
      newGoodses: [],
      hotGoodses: [],
      recommendGoodses: [],
      list: [],
      query: "",
    });
    //通过toRefs 结构
    onMounted(async () => {
      const { data } = await getHome();
      state.swiperList = data.carousels;
      state.newGoodses = data.newGoodses;
      state.recommendGoodses = data.recommendGoodses;
      state.hotGoodses = data.hotGoodses;
    });
    function handnavdetails(id: string) {
      router.push({
        path: "/goodsDetails",
        query: {
          id,
        },
      });
    }
    // toRefs 对数据进行包装优化 在模板里边使用的时候 可以去掉 state 直接访问state内部数据
    return { ...toRefs(state), handnavdetails };
  },
});
</script>
<style lang="scss">
.icp {
  text-align: center;
  width: 100%;
  margin: 20px 0;
  a {
    color: #909399;
  }
}
</style>
